<template>
  <div>
    <t-button size="small" @click="OnClick" theme="primary">
      <template #icon>
        <HistoryIcon/>
      </template>
      积分记录
    </t-button>

    <t-drawer v-model:visible="data.show" :header="`用户【${props.id}】的积分变更记录`" :closeOnOverlayClick="false"
              :on-confirm="handleConfirm" @close="handleClose" size="100%" destroy-on-close
              confirmBtn="关闭">
      <div>
        <t-table row-key="id" :data="data.list" :columns="HistoryTableColumns"
                 bordered hover stripe paginationAffixedBottom size="small" resizable
                 :loading="data.Loading" tableLayout="auto" v-model:selectedRowKeys="data.select"
                 :pagination="{total: data.list.length,pageSizeOptions:[10,20,50,100,200,500,1000]}">
          <template #id="db">
            <t-tag size="small" theme="default">{{ db.row.id }}</t-tag>
          </template>
          <template #created_at="db">
            <t-tag size="small" theme="default">
              {{ toLocalTimeByTimeSecond(db.row.created_at).substring(0, 20) }}
            </t-tag>
          </template>
          <template #type="db">
            <template v-if="db.row.type === 1">
              <t-tag size="small" theme="success" variant="light-outline" shape="round">
                <template #icon>
                  <LogoGithubFilledIcon/>
                </template>
                系统充值
              </t-tag>
            </template>
            <template v-if="db.row.type === 2">
              <t-tag size="small" theme="danger" variant="light-outline" shape="round">
                <template #icon>
                  <LogoGithubIcon/>
                </template>
                系统扣除
              </t-tag>
            </template>
            <template v-if="db.row.type === 3">
              <t-tag size="small" theme="warning" variant="light-outline" shape="round">
                <template #icon>
                  <CartIcon/>
                </template>
                商品消费
              </t-tag>
            </template>
            <template v-if="db.row.type === 4">
              <t-tag size="small" theme="default" variant="light-outline" shape="round">
                <template #icon>
                  <RollbackIcon/>
                </template>
                商品退回
              </t-tag>
            </template>
          </template>
          <template #coin="db">
            <div class="r-fx-row-ybz">
              <t-tooltip :content="`${(db.row.coin/10000).toFixed(2)} 万`">
                <t-tag :theme="db.row.coin >= 0?'success':'warning'" variant="light-outline" shape="round" size="small">
                  <template #icon>
                    <MoneyCircleIcon/>
                  </template>
                  {{ db.row.coin.toFixed(2) }}
                </t-tag>
              </t-tooltip>
            </div>
          </template>
          <template #cmd_user_id="db">
            <t-tag size="small" theme="primary" variant="light-outline" shape="round">
              <template #icon>
                <UserIcon/>
              </template>
              {{ db.row.cmd_user_id }}
            </t-tag>
          </template>
          <template #intro="db">
            <div class="intro">
              {{ db.row.intro }}
            </div>
          </template>
          <template #topContent>
            <t-space style="margin-bottom: 0.6em">
              <t-button @click="GetCoinHistory" theme="primary" size="small">
                <template #icon>
                  <RefreshIcon/>
                </template>
                刷新列表
              </t-button>
              <template v-if="data.select.length > 0">
                <t-tag size="small" theme="success" variant="light-outline">
                  已选中用户总积分：{{ selectUserCoinSum.toLocaleString() }} 积分
                </t-tag>
              </template>
            </t-space>
          </template>
        </t-table>
      </div>
    </t-drawer>
  </div>
</template>
<script setup lang="ts">
import {
  HistoryIcon,
  LogoGithubFilledIcon,
  LogoGithubIcon,
  MoneyCircleIcon,
  RollbackIcon, RefreshIcon,
  CartIcon, UserIcon
} from "tdesign-icons-vue-next";
import {reactive, ref, watch} from "vue";
import api from "../../../../api/api";
import {PrimaryTableCol} from "tdesign-vue-next";
import {CoinHistory} from "../../../../tool/types";
import {toLocalTimeByTimeSecond} from "../../../../tool/time";

const props = defineProps(['id'])
const data = reactive({
  show: false,
  formData: {
    id: 0,
  },
  Loading: false,
  list: new Array<CoinHistory>(),
  select: []
})

const OnClick = async () => {
  data.show = true
  data.formData.id = props.id || 0
  await GetCoinHistory()
}
const GetCoinHistory = async () => {
  data.Loading = true
  let res = await api.Admin.User.GetCoinHistory({
    id: data.formData.id
  })
  if (res != null) {
    data.list = res.data
  }
  data.Loading = false
}
const handleClose = () => {
  data.show = false
}

const handleConfirm = async () => {
  data.show = false
}

//计算选中用户的总积分
const selectUserCoinSum = ref(0)
watch(() => data.select, () => {
  let sum = 0
  selectUserCoinSum.value = 0
  data.select.forEach(it => {
    for (let i = 0; i < data.list.length; i++) {
      if (data.list[i].id === it) {
        sum += data.list[i].coin || 0
      }
    }
  })
  selectUserCoinSum.value = sum
})

const HistoryTableColumns: Array<PrimaryTableCol> = [
  {
    align: 'center',
    colKey: 'row-select',
    width: '50',
    type: 'multiple',
  },
  {
    colKey: 'id',
    align: 'center',
    width: '100',
    title: 'ID',
  },
  {
    colKey: 'created_at',
    align: 'center',
    width: '180',
    title: '时间',
  },
  {
    colKey: 'type',
    align: 'center',
    width: '120',
    title: '类型',
  },
  {
    colKey: 'coin',
    align: 'center',
    width: '150',
    title: '积分',
  },
  {
    colKey: 'cmd_user_id',
    align: 'center',
    width: '80',
    title: '操作人',
  },
  {
    colKey: 'intro',
    title: '备注',
  }
]
</script>